<template>
  <div>
      <el-steps :active="4" simple>
          <el-step title="学生自评申请"></el-step>
          <el-step title="班级审核"></el-step>
          <el-step title="班内公示"></el-step>
          <el-step title="学院复审"></el-step>
          <el-step title="学校核定"></el-step>
      </el-steps>
      <div style="width: 60%;margin-top: 40px;">
          <el-descriptions title="广东金融学院" :column=3 :colon=false>
              <!-- <el-descriptions-item label="专业：">{{major}}</el-descriptions-item> -->
              <el-descriptions-item label="审核开始时间：">{{audit_start_time}}</el-descriptions-item>
              <!-- <el-descriptions-item label="平均综测分：">{{Avg_com_score}}</el-descriptions-item> -->
              <!-- <el-descriptions-item label="班级：">{{Class_num}}</el-descriptions-item> -->
              <el-descriptions-item label="审核结束时间：">{{audit_over_time}}</el-descriptions-item>
              <el-descriptions-item label=''></el-descriptions-item>
          </el-descriptions>
      </div>

      <template>
          <div class="form1">
              <el-table
                  :data="tableData.slice((paginations.currentPage-1)*paginations.PageSize,paginations.currentPage*paginations.PageSize)"
                  border v-loading=false style="width: 100%; margin-top: 20px;" :fit=true>
                  <el-table-column fixed prop="index" label="序号" width="50" type="index">
                  </el-table-column>
                  <el-table-column fixed prop="classNum" label="班级号" width="120"
                      :filters="[{text:'2013456',value:'2013456'},{text:'2013455',value:'2013455'},{text:'2013458',value:'2013458'},{text:'2013457',value:'2013457'}]"
                      :filter-method="filterHandler">
                  </el-table-column>
                  <el-table-column prop="className" label="班级名" width="120">
                  </el-table-column>
                  <el-table-column prop="content" label="内容" width="180">
                  </el-table-column>
                  <el-table-column prop="newTime" label="更新时间" width="120">
                  </el-table-column>
                  <!-- <el-table-column prop="selfScore" label="自评分" width="100" sortable>
                  </el-table-column>
                  <el-table-column prop="classScore" label="班委评分" width="110" sortable>
                  </el-table-column> -->
                  <el-table-column prop="status" label="状态" width="100"
                      :filters="[{text:'审核中',value:'审核中'},{text:'已审核',value:'已审核'},{text:'未审核',value:'未审核'},{text:'未提交',value:'未提交'}]"
                      :filter-method="filterHandler">
                  </el-table-column>
                  <el-table-column prop="person" label="审核人" width="100">
                  </el-table-column>
                  <el-table-column prop="date" label="审核时间" width="100">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                      <template slot-scope="scope">
                          <router-link to="/Approval/Examine">
                              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                          </router-link>
                          <router-link to="/Class/Audit">
                              <el-button type="text" size="small">审核</el-button>
                          </router-link>
                      </template>
                  </el-table-column>

              </el-table>
              <div class="block">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes"
                      :page-size="paginations.PageSize" layout="total, sizes, prev, pager, next, jumper"
                      :total="tableData.length">
                  </el-pagination>
              </div>
          </div>
      </template>
  </div>

</template>

<script>

export default {
  name: 'Approval',
  data() {
      return {
          college: this.$store.state.com_data.college,
          major: this.$store.state.com_data.major,
          Class_num: 4,
          audit_start_time: '2022.10.01',
          audit_over_time: '2022.10.02',
          Avg_com_score: 66,
          tableData: [{
              classNum: '2013456',
              className: '20互金一班',
              content: '2022-2023综合测评',
              newTime: '2021.11.22',
              selfScore: 100,
              classScore: 100,
              status: '审核中',
              person: '吴志扬',
              date: '2022.02.01'
          }],
          paginations: {
              // 默认显示第几页
              currentPage: 1,
              // 个数选择器（可修改）
              pageSizes: [1, 2, 3, 4],
              // 默认每页显示的条数（可修改）
              PageSize: 4,
          },
      }
  },
  methods: {
      handleClick(row) {
          console.log(row)
      },
      // 每页显示多少条
      handleSizeChange(val) {
          // 改变每页显示的条数
          this.paginations.PageSize = val
          // 注意：在改变每页显示的条数时，要将页码显示到第一页
          this.paginations.currentPage = 1
          console.log(`每页 ${val} 条`);
      },
      // 现在显示当前页的第几页
      handleCurrentChange(val) {
          // 改变默认的页数
          this.paginations.currentPage = val
          console.log(`当前页: ${val}`);
      },
      filterHandler(value, row, column) {
          const property = column['property'];
          return row[property] === value;
      }
  },
  // 获取数据的位置
  mounted() {
      this.$axios.get('').then(res => {
          if (res.status === 200) {
              // console.log(res.data);
          }
      })
    if(window.sessionStorage.getItem("status")!=0)
      this.$router.push('/Error1')
  }
}

</script>
<style scoped>
.left {
  float: left;
  /* margin-top: 40px; */
}

.right {
  position: absolute;
  top: 50px;
  right: 400px;
  font-family: “Microsoft YaHei”;
}

.shenhe {
  width: 180px;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
  margin-bottom: 4px;
  border: 2px solid #ccc;
}

.form1 {
  margin-top: 3%;
  width: 100%;
}

.select_first {
  width: 150px;
  height: 30px;
  border: 1px solid #ccc;
  outline: medium
}

.rank {
  display: inline-block;
  padding: 4px;
  font-size: 14px;
  margin-right: 3px;
  border-radius: 1px;
  background-color: skyblue;
}
</style>
